<template>
    <div>
        <div class="banner" @click="handleClick">
            <img class="banner-img" :src="bannerImg">
            <div class="banner-imgInfo">
                <div class="banner-number">
                    <span class="iconfont banner-icon">&#xe692;</span>&nbsp;{{gallaryImgs.length}}
                </div>
                <div class="banner-title">{{sightName}}</div>
            </div>
        </div>
            <fade-animation>
                <common-gallary 
                :gallaryImgs='gallaryImgs'
                v-show="showGallary"
                @clickGallary='clickGallary' >
                </common-gallary>
             </fade-animation> 
    </div>
</template>
<script>
import commonGallary from 'common/gallary/gallary'
import fadeAnimation from 'common/fade/fadeAnimation'
export default {
    name:'Banner',
    props:{
        sightName:String,
        gallaryImgs:Array,
        bannerImg:String
    },
    data() {
        return {
            showGallary: false
        }
    },
    methods: {
        handleClick(){
            this.showGallary=true
        },
        clickGallary(){
            this.showGallary=false
        }
    },
    components:{
        commonGallary,fadeAnimation
    }
}
</script>
<style lang="stylus" scoped>
    .banner
        overflow : hidden
        height: 0
        padding-bottom :55%
        position: relative
        color:#ccc
        .banner-img
            width :100%
        .banner-imgInfo
            height :1.5rem
            position:absolute
            left:0
            bottom:0
            right:0
            color:#fff
            background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8))
            .banner-title
                padding-left :.25rem
                font-size :.36rem
            .banner-number
                width :1.2rem
                line-height .6rem
                margin :.2rem 
                text-align :center
                background :rgba(0,0,0,.4)
                font-size :.24rem
                border-radius :.20rem
                .banner-icon
                    font-size :.24rem   
</style>